<template>
  <div>
    <div>
      <div class="g-content pb-0">
        <x-form ref="formRef" v-model:model="form" inline label-placement="left">
          <n-form-item label="员工姓名">
            <n-input v-model:value="form.operatorName" placeholder="用户名/姓名" clearable />
          </n-form-item>
          <n-form-item label="登录邮箱">
            <n-input v-model:value="form.accountMailbox" placeholder="用户名/姓名" clearable />
          </n-form-item>
          <n-form-item label="状态">
            <n-select v-model:value="form.accountStatus" placeholder="请选择" :options="accountStatusList" clearable />
          </n-form-item>
          <x-button type="primary" @click="handleSubmit">查询</x-button>
          <x-button @click="handleRefresh">重置</x-button>
        </x-form>
      </div>
      <div class="g-content">
        <div style="display: flex">
          <div class="left-container">
            <n-space vertical :size="12">
              <n-input v-model:value="pattern" placeholder="搜索" clearable />
              <n-tree
                :pattern="pattern"
                :data="departmentList"
                key-field="id"
                label-field="departmentName"
                block-line
                :node-props="nodeProps"
              />
            </n-space>
          </div>
          <div class="right-container">
            <div>
              <x-button type="primary" @click="handleEdit('add', {})">新增员工账号</x-button>
            </div>
            <div>
              <x-data-table
                ref="tableRef"
                v-model:immediate="immediate"
                :params="paginationParams"
                :columns="columns"
                :row-key="(row) => row.id"
                row-class-name="text-sm"
                max-height="infinite"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <AccountEdit v-if="modalAdd.show" :modal-data="modalAdd" @success="handleRefresh" />
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, h, onMounted, reactive } from 'vue'
  import { XForm, XButton, XDataTable, XDiyColumnDraggable } from '@/components'
  import { NFormItem, NSelect, NInput, NSpace, NText, NPopconfirm, NTree, NSwitch } from 'naive-ui'
  import { useRouter } from 'vue-router'
  import { useStore } from '@/store'
  import AccountEdit from '@/views/system/components/AccountEdit.vue'
  import { accountStatus } from '@/api/system'
  const router = useRouter()
  const store = useStore()
  const props = defineProps({})
  const getProps = reactive(props)
  const tableRef = ref(null)
  const formRef = ref(null)
  const form = ref({
    accountMailbox: null,
    operatorName: null,
    departmentId: null,
    accountStatus: null
  })
  const accountStatusList = ref([
    {
      value: 1,
      label: '启用'
    },
    {
      value: 0,
      label: '冻结'
    }
  ])
  const modalAdd = ref({
    show: false,
    row: null,
    type: 'add'
  })
  const pattern = ref()
  const departmentList = ref([])
  const immediate = ref(true)
  const paginationParams = computed(() => {
    return {
      actions: 'system/accountList',
      data: {
        ...form.value
      }
    }
  })
  const columns = ref([
    {
      title: '员工ID',
      key: 'accountId',
      width: 120
    },
    {
      title: '员工姓名',
      key: 'accountName',
      width: 120
    },
    {
      title: '登录邮箱',
      key: 'accountMailbox',
      width: 120
    },
    {
      title: '直属部门',
      key: 'departmentName',
      width: 120
    },
    {
      title: '岗位',
      key: 'roleNameList',
      width: 120
    },
    {
      title: '状态',
      key: 'accountStatus',
      width: 120,
      render(row: any) {
        return h(
          NSwitch,
          {
            value: row.accountStatus,
            checkedValue: 1,
            uncheckedValue: 0,
            onClick: () => changeStatus(row)
          },
          {
            checked: () => h('span', '启用'),
            unchecked: () => h('span', '冻结')
          }
        )
      }
    },
    {
      title: '添加时间',
      key: 'createdAt',
      width: 120,
      render(row: any) {
        return h(NSpace, { vertical: true }, () => [
          h(NText, {}, () => row.creatorName),
          h(NText, {}, () => row.createdAt)
        ])
      }
    },
    {
      title: '最后登录',
      key: 'latestLoginTime',
      width: 120
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render(row: any) {
        return h(NSpace, () => [
          h(
            XButton,
            {
              type: 'primary',
              text: true,
              onClick: () => handleEdit('edit', row)
            },
            () => '编辑'
          ),
          h(
            NPopconfirm,
            { onPositiveClick: () => handleDelete(row) },
            {
              default: () => '删除后不可恢复，请确认是否删除？',
              trigger: () =>
                h(
                  XButton,
                  {
                    type: 'primary',
                    text: true
                  },
                  () => '删除'
                )
            }
          )
        ])
      }
    }
  ])

  onMounted(() => {
    getDepartmentList()
  })

  const getDepartmentList = async () => {
    const { data } = await store.dispatch('system/departmentList', {
      departmentName: pattern.value
    })
    departmentList.value = [data]
  }
  const nodeProps = ({ option }: { option: TreeOption }) => {
    return {
      onClick() {
        form.value.departmentId = option.id
        handleSubmit()
      }
    }
  }
  const handleEdit = (type: string, row: any) => {
    modalAdd.value = {
      show: true,
      row: JSON.parse(JSON.stringify(row)),
      type
    }
  }
  const handleDelete = (row: any) => {
    store.dispatch('system/accountDelete', { accountId: row.accountId }).then(() => {
      immediate.value = true
    })
  }

  // 状态
  const changeStatus = async (row: any) => {
    const params = {
      id: row.accountId,
      accountStatus: row.accountStatus === 0 ? 1 : 0
    }
    await store.dispatch('system/accountStatus', params).then(() => {})
    tableRef.value.reload()
  }

  const handleSubmit = () => {
    immediate.value = true
  }
  const handleRefresh = () => {
    formRef.value.resetFields()
    handleSubmit()
  }
</script>

<style lang="scss" scoped>
  .left-container {
    min-width: 300px;
    margin-right: 10px;
  }
</style>
